<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>博客用户注册</title>
    <script src="/static/js/vue-2.7.14.js"></script>
    <script src="/static/js/axios-1.4.0.js"></script>
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f8f9fa;
            background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        }

        .register-container {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.1);
            width: 350px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .register-container h2 {
            text-align: center;
            margin-bottom: 25px;
            font-size: 30px;
            color: #333;
            font-weight: 600;
        }

        .register-container input[type="text"],
        .register-container input[type="password"],
        .register-container input[type="email"],
        .register-container input[type="tel"] {
            box-sizing: border-box;
            width: 100%;
            padding: 12px;
            margin-bottom: 20px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

        .register-container input[type="text"]:focus,
        .register-container input[type="password"]:focus,
        .register-container input[type="email"]:focus,
        .register-container input[type="tel"]:focus {
            outline: none;
            border-color: #007BFF;
        }

        .register-container button {
            width: 100%;
            padding: 14px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            transition: background-color 0.3s ease;
        }

        .register-container button:hover {
            background-color: #0056b3;
        }

        .message {
            color: red;
            margin-top: 15px;
            margin-bottom: 0;
            text-align: center;
            font-size: 14px;
        }
    </style>
</head>

<body>
<div id="app" class="register-container">
    <h2>欢迎注册</h2>
    <input v-model="username" type="text" placeholder="用户名">
    <input v-model="password" type="password" placeholder="密码">
    <input v-model="email" type="email" placeholder="邮箱">
    <input v-model="telephone" type="tel" placeholder="电话号码">
    <button @click="register">注册</button>
    <p class="message" v-if="message">{{ message }}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            username: '',
            password: '',
            email: '',
            telephone: '',
            message: '',
            countdown: 0
        },
        methods: {
            register() {
                if (!this.username || !this.password || !this.email || !this.telephone) {
                    this.message = '用户名、密码、邮箱和电话号码都不能为空，请检查输入。';
                    return;
                }
                const user = {
                    username: this.username,
                    password: this.password,
                    email: this.email,
                    telephone: this.telephone
                };
                axios.post('http://localhost:8080/register', user)
                    .then(response => {
                        if (response.data === true) {
                            this.countdown = 3;
                            this.message = `注册成功，${this.countdown}秒后自动返回登录页面`;
                            const intervalId = setInterval(() => {
                                this.countdown--;
                                this.message = `注册成功，${this.countdown}秒后自动返回登录页面`;
                                if (this.countdown === 0) {
                                    clearInterval(intervalId);
                                    window.location.href = 'http://localhost:8080/login';
                                }
                            }, 1000);
                        } else {
                            this.message = '注册失败，请检查输入信息';
                        }
                        console.log('注册结果', response.data);
                    })
                    .catch(error => {
                        console.error('注册失败', error);
                        this.message = '注册失败，请检查输入信息';
                    });
            }
        }
    });
</script>
</body>

</html>
